<script setup>
const active = ref(0);
const active1 = ref(0);
const list = reactive([]);
const Notice = ref("");
const member = ref("1");
const tabName = ref("标准会员"); //默认标准会员
// const element = ref()
import { ref, reactive } from "vue";
import {
  complete,
  postMember,
  memberPrice,
  weChatPayment,
  testVerify,
} from "../../Api/complete/index.js";
// import { searchDetails } from "../../Api/searchInfo/searchInfo.js";
import { useRouter } from "vue-router";
import axios from "axios";
const imgList = reactive([
  { url: new URL(`../../assets/img/3.png`, import.meta.url).href, id: 2 },
  { url: new URL(`../../assets/img/2.png`, import.meta.url).href, id: 3 },
  {
    url: new URL(`../../assets/img/蒙版组 4@2x.png`, import.meta.url).href,
    id: 4,
  },
  {
    url: new URL(`../../assets/img/蒙版组 5@2x.png`, import.meta.url).href,
    id: 5,
  },
  {
    url: new URL(`../../assets/img/蒙版组 6@2x.png`, import.meta.url).href,
    id: 6,
  },
]);
const memberList = reactive([]);
postMember().then((res) => {
  if (res.data.code == 1) {
    memberList.value = res.data.data;
    memberList.value.forEach((item) => {
      item.url = 0;
      imgList.forEach((element) => {
        if (item.id == element.id) {
          item.url = element.url;
        }
      });
    });
  } else {
    ElMessage.error(res.data.msg);
  }
});
const form = reactive({
  level_id: 2,
});
const searchInfo = () => {
  axios
    .post("http://api.51zhaobiao.com.cn/read/detail?nid=422998169 ")
    .then((res) => {
      if (res.data.data.list.length !== 0) {
        list.value = res.data.data.list[0];
      } else {
        list.value = res.data.data.list;
      }
      if (res.data.code == 1) {
        Notice.value = res.data.data.content;
      }
    });
};
//跳转会员支付页面
const router = useRouter();
const Jump = () => {
  router.push({
    path: "/memberPayment",
  });
};
searchInfo();
const handleClick = (event) => {
  memberId.value = event.id;
  tabName.value = event.name;
  postMemberPrice();
  console.log(event.name, tabName.value);
};
// const handleClick1 = (event) =>{
//   console.log("event");
// }
// 会员购买对应的价格
const price = reactive([]); //会员价格
const postMemberPrice = () => {
  const form = reactive({
    level_id: memberId.value,
  });
  memberPrice(form).then((res) => {
    if (res.data.code == 1) {
      price.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const form1 = reactive({
  level_id: 2,
});
memberPrice(form1).then((res) => {
  if (res.data.code == 1) {
    price.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
const memberId = ref(0);
const changeStatus = (number) => {
  active.value = number.id;
};
const changeStatus1 = (number) => {
  active1.value = number;
};
</script>

<template class>
  <div class="box">
    <!-- <el-button text @click="dialogVisible = true">
      click to open the Dialog
    </el-button> -->
    <div class="details">
      <div class="details-top">
        <div>
          <img src="../../assets/img/路径 4072@3x.png" alt="" class="ioc" />
          <span style="vertical-align: middle; margin-left: 20px"
            >公告详情</span
          >
        </div>
        <div class="title"></div>
        <div class="daochu">
          <div class="dc-ioc">
            <img src="../../assets/img/路径 4058@2x.png" alt="" />
            <p>导出</p>
          </div>
          <div class="dc-ioc">
            <img src="../../assets/img/组 4759@2x.png" alt="" />打印
          </div>
          <div class="dc-ioc">
            <img src="../../assets/img/路径 4068@2x.png" alt="" />收藏
          </div>
        </div>
      </div>
      <div class="details-conten">
        <div class="details-a">
          <div class="details-tb">中标公告</div>
          <div class="details-js">
            海门区人民医院采购肺结节人工智能辅助诊断软件项目产品介绍公告
          </div>
        </div>
        <div class="details-b">
          <div style="display: flex; width: 170px">
            <div class="sj">
              <img src="../../assets/img/组 4764@2x.png" alt="" />
            </div>
            <div class="sj-a">2023-12-29</div>
          </div>
          <div style="display: flex; width: 115px">
            <div class="sj">
              <img src="../../assets/img/组 4764@2x.png" alt="" />
            </div>
            <div class="sj-a">北京</div>
          </div>
          <div style="display: flex">
            <div class="sj">
              <img src="../../assets/img/组 4768@2x.png" alt="" />
            </div>
            <div
              class="sj-a"
              style="font-size: 14px; font-weight: 400; color: #fe8d03"
            >
              229.68万元
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="mask" v-if="member == '1'">
        <div class="membership">
          <div class="membership-top">开通会员套餐，获取更多商机</div>
          <el-tabs
            v-model="tabName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClick1"
          >
            <el-tab-pane
              v-for="item in memberList.value"
              :label="item.name"
              :name="item.name"
            >
              <template #label>
                <span class="custom-tabs-label" @click="handleClick(item)">
                  <div class="hy">
                    <img :src="item.url" alt="" />
                    <!-- {{ item.url }} -->
                  </div>
                  <span>{{ item.name }}</span>
                </span>
              </template>
              <div class="Recharge">
                <div class="radio">
                  <div class="radio-span">
                    <div
                      class="title1"
                      :class="{ checked: active === item1.id }"
                      @click="changeStatus(item1)"
                      v-for="item1 in price.value"
                    >
                      <div class="tj">推荐</div>
                      <div
                        class="yin"
                        v-if="item1.num == 1 && item1.unit == 'y'"
                      >
                        一年/人民币
                      </div>
                      <div
                        class="yin"
                        v-if="item1.num == 2 && item1.unit == 'y'"
                      >
                        二年/人民币
                      </div>
                      <div
                        class="yin"
                        v-if="item1.num == 3 && item1.unit == 'y'"
                      >
                        三年/人民币
                      </div>
                      <div class="yin-y">
                        <div class="ms">秒杀价：</div>
                        <div class="msjia">{{ item1.price }}</div>
                      </div>
                      <div class="yjia">原价：¥6000</div>
                      <div class="Selected" id="myElement">
                        <img src="../../assets/img/组 4921@2x.png" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div
            style="
              width: 980px;
              height: 200px;
              background-color: #f6f6f6;
              margin-left: 40px;
            "
          >
            <div class="paymentMethod">
              <div class="payment">支付方式</div>
              <div
                class="Method"
                :class="{ checked1: active1 === 40 }"
                @click="changeStatus1(40)"
              >
                <div class="wx">
                  <img src="../../assets/img/组 4897@2x.png" alt="" />
                </div>
                <div class="zf">微信支付</div>
                <div class="wx-1">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
              </div>
              <div
                class="Method"
                :class="{ checked1: active1 === 50 }"
                @click.stop="changeStatus1(50)"
              >
                <div class="wx">
                  <img src="../../assets/img/组 4898@2x.png" alt="" />
                </div>
                <div class="zf">支付宝支付</div>
                <div class="wx-1">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
              </div>
              <div
                class="Method"
                :class="{ checked1: active1 === 60 }"
                @click="changeStatus1(60)"
              >
                <div class="wx">
                  <img src="../../assets/img/组 4899@2x.png" alt="" />
                </div>
                <div class="zf">对公打款</div>
                <div class="wx-1">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
              </div>
            </div>
            <div class="Deduction">
              <div class="successful-1"></div>
              <div class="successful-2"></div>
              <el-button class="button-2" type="primary" @click="Jump"
                >前往购买</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="information">
        <div class="information-top">
          <div
            style="
              width: 4px;
              height: 16px;
              background-color: #6675ff;
              margin-left: 40px;
            "
          ></div>
          <div class="jb">基本信息</div>
          <div class="feedback">数据错误反馈</div>
        </div>
        <!-- <div class="table">
          <div class="table-td">
            <div class="td-1">招标公司</div>
            <div class="td-2 xhx">{{list.value.xmdw}}</div>
            <div class="td-1">招标联系人</div>
            <div class="td-2">{{list.value.xmlx}}{{list.value.xmdh}}</div>
          </div>
          <div class="table-td">
            <div class="td-1">招标代理机构</div>
            <div class="td-2 xhx">{{list.value.dldw}}</div>
            <div class="td-1">代理联系人</div>
            <div class="td-2">{{list.value.dllx}}{{list.value.dldh  }}</div>
          </div>
          <div class="table-td" style="padding-top: 10px" v-if="list.value.infoid!==9">
            <div class="td-1">中标公司</div>
            <div class="td-2 xhx">{{list.value.zbdw}}</div>
            <div class="td-1">中标联系人</div>
            <div class="td-2">{{list.value.zblx}}{{list.value.zbdh  }}</div>
          </div>
        </div> -->
      </div>
      <div class="detailsText">
        <div class="information-top">
          <div
            style="
              width: 4px;
              height: 16px;
              background-color: #6675ff;
              margin-left: 40px;
            "
          ></div>
          <div class="jb">公告正文</div>
        </div>
        <div class="fwb" v-html="Notice"></div>
      </div>
    </div>

    <!-- <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>
<style lang="scss">
img {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  //  display: flex;
  justify-content: center;
}

.details {
  width: 1200px;
  height: 152px;
  background-color: #fff;
  margin: auto;
}

.details-top {
  // width: 100%;
  width: 1200px;
  height: 56px;
  border-bottom: 1px solid #eee;
  line-height: 56px;
  padding-left: 40px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.ioc {
  width: 14px;
  height: 16px;
}

.title {
  // width: 100px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  line-height: 50px;
  // padding-left: 6px;
  position: absolute;
  left: 60px;
  top: 4px;
}

.daochu {
  width: 230px;
  height: 16px;
  line-height: 50px;
  display: flex;
  margin-right: 10px;
  margin-right: 20px;
  box-sizing: border-box;
}

.dc-ioc {
  width: 33%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  display: flex;
  color: #333333;

  img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-top: 18px;
  }
}

.details-conten {
  width: 100%;
  height: 95px;
}

.details-a {
  height: 24px;
  width: 100%;
  padding-left: 40px;
  display: flex;
  margin-bottom: 30px;
}

.details-tb {
  width: 80px;
  height: 24px;
  border-radius: 4px;
  background: #6675ff;
  margin-top: 17px;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff;
  margin-right: 10px;
}

.details-js {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  margin-top: 18px;
}

.details-b {
  width: 100%;
  height: 14px;
  /* margin-top: 25px; */
  padding-left: 41px;
  display: flex;
}

.sj {
  width: 16px !important;
  height: 14px;
  margin-right: 4px;
}

.sj-a {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #a9b1be;
  opacity: 1;
}

.information {
  width: 1200px;
  height: 255px;
  background-color: #fff;
  margin: 10px auto;
  position: relative;
  /* 确保子元素能够正常显示 */
}

.information-top {
  width: 1200px;
  height: 56px;
  padding-top: 20px;
  display: flex;
  border-bottom: 1px solid #eee;
  position: relative;
}

.jb {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  padding-left: 10px;
  margin-top: -2px;
}

.feedback {
  width: 140px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #6675ff;
  opacity: 1;
  position: absolute;
  right: -18px;
  top: 18px;
}

.table {
  width: 1120px;
  margin: 0 auto;
  padding-top: 20px;
}

.table-td {
  width: 100%;
  height: 50px;
  display: flex;
}

.td-1 {
  width: 150px;
  height: 50px;
  background: #f5f6fa;
  border: 1px solid #eeeeee;
  opacity: 1;
  border-radius: 0px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 50px;
  text-align: center;
}

.td-2 {
  width: 412px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  opacity: 1;
  border-radius: 0px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 50px;
  /* color: #6675FF;
  text-decoration: underline; */
  opacity: 1;
  text-indent: 2em;
}

.xhx {
  text-decoration: underline;
  /* 添加下划线 */
  color: #6675ff;
  cursor: pointer;
  /* 修改文本颜色为红色 */
}

.detailsText {
  width: 1200px;
  height: auto;
  background-color: #fff;
  margin: 10px auto;
}

.fwb {
  width: 1120px;
  height: 100%;
  margin: 20px auto;
  padding-bottom: 20px;

  p {
    height: auto;
  }
}

.container {
  width: auto;
  height: auto;
  position: relative;
  /* 确保子元素能够正常显示 */
}

.mask {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1200px !important;
  height: 100%;
  background-color: rgba(246, 246, 246, 0.93);
  z-index: 1;
  // display: none;
}

//开通会员页面
.membership {
  // margin-top: 70px;
  width: 1080px;
  background: linear-gradient(
    180deg,
    #6675ff 0%,
    rgba(102, 117, 255, 0) 100%
  ) !important;
  margin: 70px auto;
}
.membership-top {
  height: 140px;
  padding-top: 50px;
  text-align: center;
  font-size: 32px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 56px;
  color: #fbd49c;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.el-tabs__content {
  width: 1160px;
  box-sizing: border-box;
  // height: 400px;
}

.el-tabs--card > .el-tabs__header {
  border: none !important;
  margin-left: 40px;
}

.demo-tabs {
  height: 240px;
}

.el-tabs__header .is-top {
  height: 60px;
  line-height: 40px;
  border: none !important;
}

.el-tabs__item.is-active {
  width: 180px;
  height: 60px;
  background: linear-gradient(225deg, #fbcf89 0%, #efd6a8 100%);
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  margin-top: 0;
}

.el-tabs__item {
  width: 180px;
  padding: 0;
  background: linear-gradient(180deg, #515151 0%, #4c4c4c 52%, #3a3a3a 100%);
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  box-sizing: border-box;
  margin-top: 20px;
  padding-top: 0px;
}

#tab-second {
  padding: 0;
}

.custom-tabs-label {
  display: flex;

  span {
    width: 100px;
    text-align: left;
    margin-top: -20px;
  }

  .hy {
    margin-left: 35px;
    margin-top: -20px;
    width: 20px;
    height: 20px;

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.is-active .custom-tabs-label {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 60px;
  margin-left: -20px;
  color: #6d4315;

  span {
    width: 100px;
    text-align: left;
    margin-top: 0px;
  }

  .hy {
    width: 32px;
    height: 30px;
    margin-top: -4px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.custom-tabs-label {
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 40px;
  color: #ffffff;
}

.Recharge {
  width: 980px;
  // height: 400px;
  background: #f6f6f6;
  opacity: 1;
  border-radius: 0px;
  margin-left: 40px;
  margin-top: 5px;
}

.radio {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;

  w span {
    width: 150px;
    font-size: 30px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .radio-span {
    display: flex;
    margin-left: 20px;

    .title1 {
      width: 300px;
      height: 150px;
      border-radius: 8px;
      background-color: #fff;
      margin: 30px 20px 30px 0;
      padding: 0;
      position: relative;
    }

    .checked {
      color: #537cf5;
      // border: 1px solid #537cf5;
      border: 2px solid #f5d3a3;

      .Selected {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px !important;
        height: 60px !important;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .yin {
        color: #333333;
      }

      .yin-y {
        color: #d92f2f;
      }
      .tj {
        width: 60px;
        height: 26px;
        background: #d92f2f;
        opacity: 1;
        border-radius: 8px 0px 8px 0px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        opacity: 1;
        text-align: center;
      }
    }
  }
}

.yin {
  width: 100%;
  height: 19px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #acacac;
  opacity: 1;
  text-align: center;
  margin-top: 10px;
}

.yin-y {
  // width: 100%;
  height: 34px;

  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 0px;
  color: #acacac;
  opacity: 1;
  margin-top: 20px;
  text-align: center;
  display: flex;
  .ms {
    // width: 100%;
    font-size: 18px;
    margin-left: 60px;
  }
  .msjia {
    font-size: 34px;
  }
}
.yjia {
  width: 100%;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #acacac;
  opacity: 1;
  text-align: center;
  text-decoration: line-through;
}
.tj {
  width: 60px;
  height: 26px;
  background: #fff;
  opacity: 1;
  border-radius: 8px 0px 8px 0px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff;
  opacity: 1;
  text-align: center;
  // margin-top: 20px;
}

.Selected {
  width: 60px;
  height: 60px;
  // display: none;
  position: absolute;
  bottom: 0;
  right: 0;

  img {
    width: 0;
    height: 0;
  }
}

.kb {
  margin-top: 20px;
  background-color: #fff;
}

.paymentMethod {
  width: 940px !important;
  height: 70px;
  background: #ffffff;
  // opacity: 1;
  border-radius: 8px;
  margin-left: 20px;
  display: flex;
  z-index: 100 !important;
  margin-top: 30px;
  // padding-top: 45px;
}

.payment {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #333333;
  opacity: 1;
  margin: 35px 40px 27px 20px;
}

.Method {
  margin-right: 25px;
  width: 180px !important;
  height: 40px;
  background: #ffffff;
  border: 1px solid #dddddd;
  opacity: 1;
  border-radius: 4px;
  display: flex;
  margin-top: 15px;
  position: relative;

  .wx {
    width: 27px;
    height: 24px;
    margin: 8px 0 8px 40px;

    img {
      width: 27px;
      height: 24px;
    }
  }

  .zf {
    margin-left: 5px;
    margin-top: 10px;
  }

  .wx-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;

    img {
      width: 0;
      height: 1;
    }
  }
}

.checked1 {
  background: #fefaf2;
  border: 1px solid #f5d3a3;

  .wx-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px !important;
    height: 20px !important;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.Deduction {
  margin-left: 20px;
  margin-top: 30px;
  display: flex;
  height: 45px;
  width: 1140px;

  .el-input {
    margin-top: 10px;
    width: 250px;
    height: 40px;
  }

  .button-1 {
    margin-top: 10px;
    margin-left: 10px;
    width: 80px;
    height: 40px;
    background: #6675ff;
    opacity: 1;
    border-radius: 4px;
  }

  .button-2 {
    margin-left: 10px;
    width: 180px;
    height: 60px;
    background: linear-gradient(360deg, #6675ff 0%, #8995ff 51%, #6675ff 100%);
    opacity: 1;
    border-radius: 4px;

    span {
      width: 88px;
      height: 22px;
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      line-height: 0px;
      color: #ffffff;
      opacity: 1;
      // margin-left:60px
    }
  }

  .successful {
    width: 80px;
    margin-top: 28px;
    margin-left: 25px;
    margin-right: 85px;
    width: 171px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
  }

  .yj {
    margin-top: 28px;
    width: 115px;
    // margin-right:20px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-decoration: line-through;
  }

  .successful-1 {
    width: 50px;
    margin-top: 28px;
    margin-left: 200px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
  }

  .successful-2 {
    width: 100px;
    margin-top: 28px;
    margin-left: 0;
    font-size: 24px;

    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #d92f2f;
    opacity: 1;
  }
}

.memberships-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // padding-bottom: 40px;
  width: 1080px;
  height: 20px;
  margin: 0 auto;
  // background-color: #000;
}

.el-radio__inner {
  border-radius: 2px !important;
}

.el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 8px;
  height: 3px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

.bottom-1 {
  margin-top: 17px;
  width: 256px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #d92f2f;
  opacity: 1;
}

.el-radio__label {
  display: flex;
}
</style>
